Wink << Previous Next >> CMSiMDE

Add Wink

由於 Wink 所建立的 mp4 影片檔案必須透過 Javascript 與 css 的設定才能具備所有功能, 在 CMSiMDE 頁面新增 Wink mp4 影片時必須直接編輯 html, 除了導入與 mp4 檔案對應的 Javascript 外, HTML5 Videl 必須加以修正才能在手機與平板上的瀏覽器播放影片.

以下為相關插入範例語法:

以下則為參考用的 Wink 影片插入 html:

<div class="winkVideoContainerClass"><video width="800" height="600" autoplay="autoplay" class="winkVideoClass" data-dirname="./../cmsimde/static" data-varname="winkVideoData2" loop="loop" muted="" playsinline="">
<source src="./../downloads/wink_tutorial2.mp4" type="video/mp4" /></video>
<div class="winkVideoOverlayClass"></div>
<div class="winkVideoControlBarClass"><button class="winkVideoControlBarPlayButtonClass"></button> <button class="winkVideoControlBarPauseButtonClass"></button>
<div class="winkVideoControlBarProgressLeftClass"></div>
<div class="winkVideoControlBarProgressEmptyMiddleClass"></div>
<div class="winkVideoControlBarProgressRightClass"></div>
<div class="winkVideoControlBarProgressFilledMiddleClass"></div>
<div class="winkVideoControlBarProgressThumbClass"></div>
</div>
<div class="winkVideoPlayOverlayClass"></div>
</div>

其中的 data-dirname 屬性在動態網頁時必須設定為 /static, 而每一個 mp4 影片都必須有不同的 data-varname 屬性名稱, 以上一頁有兩個 Wink mp4 影片並列時, 第一個影片的 data-varname 為 winkVideoData1, 而第二部的 data-varname 則設為 winkVideoData2.

至於 winkVideoData 變數的內容則取自 Wink 專案轉檔後與 .htm 超文件檔案同一目錄下的 Javascript 檔案.

Wink << Previous Next >> CMSiMDE